<template>
  <div class="testList">
    <div style="position: absolute;top: 10px;right: 150px;">
      <el-button type="primary" @click="logoutFn">退出登录</el-button>
    </div>
    <div class="contentBox">
      <div class="innerLeft">
        <div class="info">
          <img :src="'https://file.jiaoyangzhixin.com/evaluator/' + testId + '.jpg'" alt="">
          <div>
            <p>主试</p>
            <p>{{ testId }}</p>
          </div>
        </div>
        <div class="selectList">
          <div class="item">
            <p style="margin: 20px 0 10px;font-size:18px">筛查版(总数{{lowTotal}}剩余{{lowSurplus}})</p>
            <p>
              <el-progress :text-inside="true" :color="'#3ec9eb'" :define-back-color="'#fff'" :stroke-width="30" :percentage="(lowSurplus/lowTotal).toFixed(2)*100"></el-progress>
            </p>
          </div>
          <!-- <div class="item">
            <p style="margin: 20px 0 10px;font-size:18px">深度评估版(总数{{heightTotal}}剩余{{heightSurplus}})</p>
            <p>
              <el-progress :text-inside="true" :color="'#3ec9eb'" :define-back-color="'#fff'" :stroke-width="30" :percentage="(heightSurplus/heightTotal).toFixed(2)*100"></el-progress>
            </p>
          </div> -->
        </div>
      </div>
      <div class="innerBox">
        <div class="topBox">
          <div class="left">
            <el-input v-model="name" placeholder="请输入姓名"/>
            <el-input v-model="phone" placeholder="请输入联系电话"/>
            <el-button @click="searchFn">查询</el-button>
          </div>
          <div class="right">
            <el-select v-model="personType" placeholder="新增被试" @change="addTestFn">
              <!-- <el-option label="成人" value="adult"></el-option> -->
              <el-option label="儿童" value="child"></el-option>
            </el-select>
          </div>
        </div>
        <div class="listBox">
          <el-scrollbar>
            <el-table :data="tableData" stripe style="width: 100%">
              <el-table-column label="序号" width="60" align='center'>
                <template #default="scope">
                  <span>{{scope.$index + 1}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="180"  align='center' />
              <el-table-column prop="birthday" label="出生日期" align='center' />
              <el-table-column prop="phone" label="联系电话"  align='center' />
              <el-table-column label="操作"  align='center' width="240">
                <template #default="scope">
                  <el-button style="background: #2b82e7;color: #fff;" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button style="background: #3ec9eb;color: #fff;" @click="handleFiles(scope.$index, scope.row)">档案</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-scrollbar>
        </div>
        <div class="pageBox">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            prev-text="上一页"
            next-text="下一页"
            :page-size="pageSize"
            :current-page="pageNum"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { seckGetPsychTested, serverSeckGetBalance } from '@/api/home.js'
export default {
  data() {
    return {
      testId: localStorage.getItem("testId"),
      // testId: 10008,
      heightTotal: 0,
      heightSurplus: 0,
      lowTotal: 0,
      lowSurplus: 0,
      personType: '',
      name: '',
      phone: '',
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      // sex 0男 1女；classification 0儿童 1成人
      baseInfo: {
        name: '',
        sex: '0',
        health: '0',
        birthday: '',
        race: '',
        character: '',
        phone: '',
        email: '',
        classification:'1',
        prov: '',
        city: '',
        country: '',
        address: '',
        education: '',
        occupation: '',
        WAIMS_TOKEN: ''
      },
      WAIMS_TOKEN: ''
    }
  },
  mounted() {
    // localStorage.setItem('WAIMS_TOKEN', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJBdXRoQ2VudGVyIiwiaWQiOjEwMDA4LCJleHAiOjE3MTEzMDI5MjcsImlhdCI6MTcxMTI4MTMyN30.Ep4B19dSdGcY56zjE2r0qMC4H8Pljbggsr6GR0vwsh4')
    if(localStorage.getItem('WAIMS_TOKEN') && localStorage.getItem('WAIMS_TOKEN') !== '') {
      this.WAIMS_TOKEN = localStorage.getItem('WAIMS_TOKEN')
      this.geListFn()
      this.getBalance()
    } else {
      // alert('没有获取到登录token')
      // 清除localStorage 跳出网站
      // 清除与登录信息相关的local storage
      localStorage.removeItem("isLogin");
      localStorage.removeItem("baseInfo");
      localStorage.removeItem("proInfo");
      localStorage.removeItem("proUserFile");
      localStorage.removeItem("generalUserInfo");
      localStorage.removeItem("testId");
      // 清除session storage
      sessionStorage.clear();
      // 删除保存在cookie里的token
      document.cookie = "WAIMS_TOKEN" + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
      if(window.location.href.indexOf('https://xn--15t241ax9eqv8a.xn--fiqs8s/psych') > -1 ) {
        window.location.href = "https://xn--15t241ax9eqv8a.xn--fiqs8s/"
      } else if (window.location.href.indexOf('https://psychological-assessment.com/psych') > -1 ) {
        // 测试环境
        window.location.href = 'https://psychological-assessment.com/'
      } else {
        // 正式环境
        window.location.href = 'https://psychometrics-home.com/'
      }
    }
  },
  methods: {
    // 获取例数
    getBalance() {
      serverSeckGetBalance({
        WAIMS_TOKEN: this.WAIMS_TOKEN
      }).then(res => {
        console.log(res)
        if(res.code == 200) {
          this.heightTotal = res.data.height.total
          this.heightSurplus = res.data.height.surplus
          this.lowTotal = res.data.low.total
          this.lowSurplus = res.data.low.surplus
        }
      }).catch(err => {
        console.log(err)
      })
    },
    logoutFn() {
      // alert('塞克内部退出登录')
      // 清除localStorage 跳出网站
      // 清除与登录信息相关的local storage
      localStorage.removeItem("isLogin");
      localStorage.removeItem("baseInfo");
      localStorage.removeItem("proInfo");
      localStorage.removeItem("proUserFile");
      localStorage.removeItem("generalUserInfo");
      localStorage.removeItem("testId");
      // 清除session storage
      sessionStorage.clear();
      // 删除保存在cookie里的token
      document.cookie = "WAIMS_TOKEN" + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
      if(window.location.href.indexOf('https://xn--15t241ax9eqv8a.xn--fiqs8s/psych') > -1 ) {
        window.location.href = "https://xn--15t241ax9eqv8a.xn--fiqs8s/"
      } else if (window.location.href.indexOf('https://psychological-assessment.com/psych') > -1 ) {
        // 测试环境
        window.location.href = 'https://psychological-assessment.com/'
      } else {
        // 正式环境
        window.location.href = 'https://psychometrics-home.com/'
      }
    },
    handleEdit(index,row) {
      console.log(index,row)
      sessionStorage.setItem('personType', row.classification == '1' ? 'adult' : 'child')
      this.$router.push({
        path: '/enterInformation',
        query: {
          type: 'edit',
          formInfo: JSON.stringify(row)
        }
      })
    },
    handleFiles(index, row) {
      console.log(index,row)
      sessionStorage.setItem('testedId', row.id)
      sessionStorage.setItem('personType', row.classification == '1' ? 'adult' : 'child')
      // 姓名 出生日期 电话
      sessionStorage.setItem('name', row.name)
      sessionStorage.setItem('birthday', row.birthday)
      sessionStorage.setItem('phone', row.phone)
      sessionStorage.setItem('health', row.health)
      this.$router.push({
        path: row.classification == '1' ? '/personList4adult' : '/personList',
        query: {
          type: 'look'
        }
      })
    },
    handleCurrentChange(val) {
      console.log(val)
      this.pageNum = val
      this.geListFn();
    },
    geListFn() {
      var query = {
        WAIMS_TOKEN: this.WAIMS_TOKEN,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        name: this.name,
        phone: this.phone

      }
      seckGetPsychTested(query).then(res => {
        if(res.code === 200) {
          this.tableData = res.data.list
          this.total = res.data.total
        }
      }).catch(err => {
        console.log(err)
      })
    },
    searchFn() {
      this.pageNum = 1
      this.total = 0
      this.geListFn()
    },
    addTestFn() {
      // if(this.lowSurplus == 0 && this.heightSurplus == 0) {
      //   this.$message({
      //     message: '剩余例数不足'
      //   })
      //   return
      // }
      // if(this.lowSurplus == 0) {
      //   this.$message({
      //     message: '剩余例数不足'
      //   })
      //   return
      // }
      sessionStorage.setItem('personType', this.personType)
      if(this.personType == 'child') {
        // this.$router.push({
        //   path: '/selectType',
        //   query: {
        //     type: 'add',
        //     formInfo: JSON.stringify(this.baseInfo),
        //     numSurplus: JSON.stringify({
        //       lowSurplus: this.lowSurplus,
        //       heightSurplus: this.heightSurplus
        //     })
        //   }
        // })
        this.$router.push({
          path: '/enterInformation',
          query: {
            type: 'add',
            selectType: 0,
            formInfo: JSON.stringify(this.baseInfo),
            numSurplus: JSON.stringify({
              lowSurplus: this.lowSurplus,
              heightSurplus: this.heightSurplus
            })
          }
        })
        // this.$router.push({
        //   path: '/selection',
        //   query: {
        //     selectType: 0
        //   }
        // })
      } else {
        this.$router.push({
          path: '/enterInformation',
          query: {
            type: 'add',
            formInfo: JSON.stringify(this.baseInfo)
          }
        })
      }

    }
  }
}
</script>

<style lang="scss" scoped>
.testList {
  height: calc(100vh - 200px);
  background: url(../assets/images/tongyong.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 100px 140px;
  .contentBox {
    display: flex;
    height: 100%;
    background-color: #2b82e7;
    box-shadow: 35px 35px 50px 0px
      rgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }
  .innerLeft {
    width: 300px;
    padding: 60px 20px 0 50px;
    color: #fff;
    .info {
      display: flex;
      align-items: center;
      img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin-right: 20px;
      }
    }
    .selectList {
      margin-top: 40px;
      .item {
        margin-top: 20px;
      }
    }
  }
  .innerBox {
    width: calc(100% - 300px);
    height: calc(100% - 80px);
    padding: 40px 20px;
    background-color: #ffffff;
    box-shadow: 35px 35px 50px 0px
      rgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }
  .topBox {
    margin: 0px 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .listBox {
    height: calc(100% - 100px);
  }
  .pageBox {
    margin-top: 30px;
    display: flex;
    justify-content: center;
  }
}
</style>
<style lang="scss">
.testList {
  .el-input {
    width: 200px;
    margin-right: 20px;
  }
  .el-progress-bar__innerText {
    text-align: center;
    width: 100%;
  }
}
</style>
